<template>
	<view class="start-index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: lastIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<home ref="home"></home>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: lastIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<AccountAnalysis></AccountAnalysis>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: lastIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<MakeMoney></MakeMoney>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: lastIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<my ref="myRef"></my>
			</scroll-view>
		</view>

		<tn-tabbar v-model="currentIndex" :iconSize="50" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA" activeIconColor="#FBBD12" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
	</view>
</template>

<script>
	import Home from './home/index.vue';
	import MakeMoney from './makemoney/index.vue';
	import Chart from './chart/index.vue';
	import AccountAnalysis from './account/analysis.vue';
	import My from './my/index.vue';
	export default {
		components: {
			Home,
			MakeMoney,
			AccountAnalysis,
			Chart,
			My
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '首页',
						activeIcon: '/static/tabbar/home_tnnew.png',
						inactiveIcon: '/static/tabbar/home_tn.png'
					},
					{
						title: '统计',
						activeIcon: '/static/tabbar/circle_tnnew.png',
						inactiveIcon: '/static/tabbar/circle_tn.png'
					},
					{
						title: '记账',
						activeIcon: 'add',
						inactiveIcon: 'add',
						activeIconColor: '#FFFFFF',
						inactiveIconColor: '#FFFFFF',
						iconSize: 60,
						out: true
					},
					{
						title: '赚钱',
						activeIcon: '/static/tabbar/preferred_tnnew.png',
						inactiveIcon: '/static/tabbar/preferred_tn.png',
					},
					{
						title: '我的',
						activeIcon: '/static/tabbar/mine_tnnew.png',
						inactiveIcon: '/static/tabbar/mine_tn.png'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				lastIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			});
			this.switchTabbar(index)
		},
		onBackPress() {
			return true;
		},
		onShow() {
			this.currentIndex = this.lastIndex;
			// this.switchTabbar(0);
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (index == 2) {
					this.$common.navigateTo('/pages/account/record', { animationType: 'slide-in-bottom' });
					return;
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true;
				}
				this.currentIndex = index;
				this.lastIndex = index;
			},
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
				if (this.currentIndex === 3) {}
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>